<template>
  <div class="login_container">
    
    <div class="login_box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img
          src="../assets/1.jpg"
          alt=""
          style="width:100%; height:100%;border-radius:50%;background-color:#eee"
        >
      </div>
      <!-- 登陆表单区 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        label-width="0px"
        class="login_form"
        :rules="loginFormRules"
      >
        <el-form-item prop="username">
          <el-input
            prefix-icon="iconfont icon-user"
            placeholder=" 用户名"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            prefix-icon="iconfont icon-3702mima"
            placeholder=" 密码"
          ></el-input>
        </el-form-item>

        <el-form-item class="btns">
          <el-button
            type="primary"
<<<<<<< HEAD
            @click="login1()" 
            circle
            style="height:80px;width:80px;margin-left:15px;font-size:24px"
          >登陆</el-button>
=======
            @click="login(), denglu()" 
            circle
            style="height:80px;width:80px;margin-left:15px"
          ><p2>登陆</p2></el-button>
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
         
          <el-button
            type="text"
            @click="dialogFormVisible=true"
          >快速注册新账号</el-button>

        </el-form-item>

      </el-form>

    </div>
    <el-dialog
      title="快捷注册新账号"
      :visible.sync="dialogFormVisible"
      style="width:1000px;left:17%"
    >
      <el-form>
        <el-form-item prop="username">
          <el-input
            prefix-icon="iconfont icon-user"
            placeholder=" 用户名 "
            v-model="zhuceuse.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="zhuceuse.password"
            prefix-icon="iconfont icon-3702mima"
            placeholder=" 密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="zhuce"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      dialogFormVisible: false,
<<<<<<< HEAD
      loginList : {},
      
      loginForm: {
        username: '',
        password: '',     
=======
      
      loginForm: {
        username: '',
        password: '',
       
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
      },
      zhuceuse: {
        username: '',
        passwordL: '',
      },
      loginFormRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 15, message: '长度在 6 到 15个字符', trigger: 'blur' }]
      },



    }
  },
  
  methods: {
    
    denglu() {
      this.axios.get("http://localhost:3000/users").then((response) => {
        this.list = response.data;
        for(let a=0;a<this.list.length;a++){
          if(this.loginForm.username==this.list[a].username && this.loginForm.password ==this.list[a].password){
             this.axios({
        method: "post",
        url: 'http://localhost:3000/user',
        ...this.list[a]
      })
          }
        }
      });
      let add = this.list
     
    },

    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    toRegister() {
      this.$router.push({ path: "/register" });
    },
<<<<<<< HEAD
    login1(){
    
      this.axios.get("http://localhost:3000/users?username=" + this.loginForm.username + "&password="+ this.loginForm.password).then(response=>{
        this.loginList = response.data[0];
        console.log(this.loginList);
         if (response.data.length < 1) {
            this.$message({
              type: "error",
              message: "账号或密码错误",
            });
          }
          else {
            window.sessionStorage.setItem('token', response.data[0].token)
            // this.$router.push({ path: "/shouye" });
            var qaq = this.loginList
             this.$router.push({path : "/shouye",query: {qaq : this.loginList.id}})//传
            this.$message({
              type: "success",
              message: "登陆成功",
             
            });
          }
     
      }).catch((error)=>{

      });

      
      
    },
    login(loginForm) {
      this.dialogFormVisible = false
      let _username = this.loginForm.username;
      let _password = this.loginForm.password;
      

      this.axios.get(`http://localhost:3000/users?username=${_username}&password=${_password}`)
        .then((response) => {
          console.log(response.data);
          if (response.data.length < 1) {
            this.$message({
              type: "error",
              message: "账号或密码错误",
            });
          }
          else {
            window.sessionStorage.setItem('token', response.data[0].token)
            this.$router.push({ path: "/shouye" });
            this.$message({
              type: "success",
              message: "登陆成功",
              
            });
          }
        })
        .catch(function (error) {
          console.log(error);
          
        });
    },
    
=======
    login(loginForm) {
      this.dialogFormVisible = false
      let _username = this.loginForm.username;
      let _password = this.loginForm.password;
      

      this.axios.get(`http://localhost:3000/users?username=${_username}&password=${_password}`)
        .then((response) => {
          console.log(response.data);
          if (response.data.length < 1) {
            this.$message({
              type: "error",
              message: "账号或密码错误",
            });
          }
          else {
            window.sessionStorage.setItem('token', response.data[0].token)
            this.$router.push({ path: "/shouye" });
            this.$message({
              type: "success",
              message: "登陆成功",
              
            });
          }
        })
        .catch(function (error) {
          console.log(error);
          
        });
    },
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
    zhuce() {
      this.dialogFormVisible = false
      let add = this.zhuceuse
      this.axios({
        method: "post",
        url: 'http://localhost:3000/users',
        data: {
          username: this.zhuceuse.username,
          password: this.zhuceuse.password,
        }
      }).then(res => {
     console.log(res.data)
          alert("注册成功")  
      })
    },
    
  }

}
import { get } from 'http';
</script>
<style  scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff !important;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login_box .avatar_box {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
.btns {
  display: flex;
  margin-left: 120px;
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
}
<<<<<<< HEAD

=======
p2{
  font-size: 24px
}
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
</style>
